<template>
	<view class="th-titlebar-box" :style="{'font-size':!commonTitle?'40rpx':'36rpx','top':top}">
		<view :style="{'height':statusBarheight+'px'}"></view>
		<view class="title-content-box"
			:style="{'height':titleBarHeight+'px','justify-content':commonTitle?'center':''}">
			<view  v-if="commonTitle" class="left"  @tap="finish">
				<u-icon class="left" name="arrow-left"></u-icon>
			</view>

			<slot v-if="!commonTitle" class="icon-text-distance"></slot>
			{{title}}
		</view>







	</view>
</template>

<script>
	export default {
		name: "th-titlebar",
		data() {
			return {
				viewHeight: 0,
				titleBarHeight: this.$c.titleBarHeight!=0?this.$c.titleBarHeight:44, //标题栏高度--为减少跳动
				statusBarheight: this.$c.statusBarheight!=0?this.$c.statusBarheight:25, //状态栏高度--为减少跳动,

			};
		},
		mounted() {
			if(this.$c.statusBarheight==0){
				this.statusBarheight = wx.getSystemInfoSync().statusBarHeight
				this.$c.statusBarheight=this.statusBarheight
			}
			
			// #ifdef MP-WEIXIN
			if(this.$c.titleBarHeight==0){
				this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarheight) *
					2 +
					uni.getMenuButtonBoundingClientRect().height
					this.$c.titleBarHeight=this.titleBarHeight
			}
			this.viewHeight = this.titleBarHeight + this.statusBarheight

			// #endif
			// #ifndef MP-WEIXIN
			this.statusBarheight = 0
			// #endif



		},
		props: {
			commonTitle: {
				type: Boolean,
				default: true
			},


			title: {
				type: String,
				default: '寿光数字人大平台'
			},
			top: {
				type: [String,Number],
				default: 0
			},
			
		},
		methods: {
			getHeight() {
				return this.viewHeight;
			},
			finish() {
				uni.navigateBack()
			}

		}
	}
</script>

<style scoped lang="scss">
	.th-titlebar-box {
		position: sticky;
		// top: 0;
		width: 100%;
		background: linear-gradient(93deg, #DF3B37 0%, #C62727 100%);
		z-index: 999;
		// font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;

		.title-content-box {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 26rpx;
			box-sizing: border-box;
			// height: 0;

			.left {
				position: absolute;
				left: 16rpx;
				height: 100%;
				width: 45rpx;


			}

		}
	}

	.icon-text-distance {
		margin-right: 16rpx;
	}
</style>